<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>我的小餐桌 - 添加菜品</title>
    <link rel="stylesheet" href="styles.css">
    <link href="https://cdn.jsdelivr.net/npm/lucide-static@latest/font/lucide.min.css" rel="stylesheet">
</head>
<body>
    <div class="device-container">
        <!-- 状态栏 -->
        <div class="status-bar">
            <div class="status-bar-left">9:41</div>
            <div class="status-bar-right">
                <span class="lucide-wifi"></span>
                <span class="lucide-battery"></span>
            </div>
        </div>
        
        <!-- 顶部导航 -->
        <div style="display: flex; align-items: center; justify-content: space-between; padding: 15px; border-bottom: 1px solid #eee; background-color: white;">
            <a href="kitchen.html" style="display: flex; align-items: center; text-decoration: none; color: var(--text-color);">
                <span class="lucide-x"></span>
                <span style="margin-left: 5px;">取消</span>
            </a>
            <span style="font-weight: 600; font-size: 18px;">添加新菜品</span>
            <button class="button" style="padding: 8px 12px; font-size: 14px;" id="saveButton" onclick="saveForm()">保存</button>
        </div>
        
        <!-- 应用内容 -->
        <div class="app-container">
            <form id="addDishForm" style="padding: 20px;">
                <!-- 上传图片区域 -->
                <div style="margin-bottom: 20px; text-align: center;">
                    <div style="width: 120px; height: 120px; margin: 0 auto; border-radius: 12px; border: 2px dashed #ddd; display: flex; flex-direction: column; align-items: center; justify-content: center; cursor: pointer;" onclick="alert('上传图片功能开发中...')">
                        <span class="lucide-camera" style="font-size: 32px; color: #999; margin-bottom: 10px;"></span>
                        <span style="color: #999; font-size: 14px;">添加菜品图片</span>
                    </div>
                </div>
                
                <!-- 基本信息 -->
                <div class="form-group">
                    <label for="dishName">菜品名称 <span style="color: #E53935;">*</span></label>
                    <input type="text" id="dishName" placeholder="请输入菜品名称" required>
                </div>
                
                <div class="form-group">
                    <label for="dishPrice">价格（元）</label>
                    <input type="number" id="dishPrice" placeholder="请输入价格">
                </div>
                
                <div class="form-group">
                    <label for="dishDescription">菜品描述</label>
                    <textarea id="dishDescription" rows="3" placeholder="请输入菜品描述"></textarea>
                </div>
                
                <div class="form-group">
                    <label for="cookTime">制作时间（分钟）</label>
                    <input type="number" id="cookTime" placeholder="请输入制作时间">
                </div>
                
                <div class="form-group">
                    <label for="difficulty">难度</label>
                    <select id="difficulty">
                        <option value="easy">简单</option>
                        <option value="medium">普通</option>
                        <option value="hard">困难</option>
                    </select>
                </div>
                
                <!-- 食材信息 -->
                <div style="margin: 30px 0 20px; font-weight: 600; font-size: 18px;">食材</div>
                
                <div id="ingredientsList">
                    <div class="ingredient-row" style="display: flex; gap: 10px; margin-bottom: 10px;">
                        <input type="text" placeholder="食材名称" style="flex: 2;">
                        <input type="text" placeholder="用量" style="flex: 1;">
                    </div>
                </div>
                
                <button type="button" class="button ghost" style="width: 100%; margin-top: 10px;" onclick="addIngredient()">
                    <span class="lucide-plus" style="margin-right: 5px;"></span>
                    添加食材
                </button>
                
                <!-- 制作步骤 -->
                <div style="margin: 30px 0 20px; font-weight: 600; font-size: 18px;">制作步骤</div>
                
                <div id="stepsList">
                    <div class="step-row" style="display: flex; gap: 10px; margin-bottom: 10px; align-items: flex-start;">
                        <div style="width: 24px; height: 24px; background-color: var(--primary-color); color: white; border-radius: 12px; display: flex; align-items: center; justify-content: center; flex-shrink: 0;">1</div>
                        <textarea placeholder="请输入制作步骤" rows="2" style="flex: 1;"></textarea>
                    </div>
                </div>
                
                <button type="button" class="button ghost" style="width: 100%; margin-top: 10px;" onclick="addStep()">
                    <span class="lucide-plus" style="margin-right: 5px;"></span>
                    添加步骤
                </button>
                
                <!-- 营养成分 -->
                <div style="margin: 30px 0 20px; font-weight: 600; font-size: 18px;">营养成分</div>
                
                <div class="form-group">
                    <label for="calories">热量（千卡/100g）</label>
                    <input type="number" id="calories" placeholder="请输入热量">
                </div>
                
                <div class="form-group">
                    <label for="protein">蛋白质（g/100g）</label>
                    <input type="number" id="protein" placeholder="请输入蛋白质含量">
                </div>
                
                <div class="form-group">
                    <label for="fat">脂肪（g/100g）</label>
                    <input type="number" id="fat" placeholder="请输入脂肪含量">
                </div>
                
                <div class="form-group">
                    <label for="carbs">碳水化合物（g/100g）</label>
                    <input type="number" id="carbs" placeholder="请输入碳水化合物含量">
                </div>
            </form>
        </div>
    </div>
    
    <script>
        // 添加食材行
        function addIngredient() {
            const ingredientsList = document.getElementById('ingredientsList');
            const ingredientRow = document.createElement('div');
            ingredientRow.className = 'ingredient-row';
            ingredientRow.style.display = 'flex';
            ingredientRow.style.gap = '10px';
            ingredientRow.style.marginBottom = '10px';
            
            ingredientRow.innerHTML = `
                <input type="text" placeholder="食材名称" style="flex: 2;">
                <input type="text" placeholder="用量" style="flex: 1;">
                <button type="button" style="width: 30px; height: 44px; display: flex; align-items: center; justify-content: center; background-color: #f5f5f5; border: none; border-radius: 5px;" onclick="removeRow(this)">
                    <span class="lucide-trash-2" style="color: #E53935;"></span>
                </button>
            `;
            
            ingredientsList.appendChild(ingredientRow);
        }
        
        // 添加步骤行
        function addStep() {
            const stepsList = document.getElementById('stepsList');
            const stepCount = stepsList.children.length + 1;
            const stepRow = document.createElement('div');
            stepRow.className = 'step-row';
            stepRow.style.display = 'flex';
            stepRow.style.gap = '10px';
            stepRow.style.marginBottom = '10px';
            stepRow.style.alignItems = 'flex-start';
            
            stepRow.innerHTML = `
                <div style="width: 24px; height: 24px; background-color: var(--primary-color); color: white; border-radius: 12px; display: flex; align-items: center; justify-content: center; flex-shrink: 0;">${stepCount}</div>
                <textarea placeholder="请输入制作步骤" rows="2" style="flex: 1;"></textarea>
                <button type="button" style="width: 30px; height: 44px; display: flex; align-items: center; justify-content: center; background-color: #f5f5f5; border: none; border-radius: 5px;" onclick="removeRow(this)">
                    <span class="lucide-trash-2" style="color: #E53935;"></span>
                </button>
            `;
            
            stepsList.appendChild(stepRow);
        }
        
        // 移除行
        function removeRow(button) {
            const row = button.parentElement;
            row.remove();
            
            // 如果是步骤，更新序号
            if (row.classList.contains('step-row')) {
                const steps = document.querySelectorAll('.step-row');
                steps.forEach((step, index) => {
                    step.querySelector('div').innerText = index + 1;
                });
            }
        }
        
        // 保存表单
        function saveForm() {
            const dishName = document.getElementById('dishName').value;
            
            if (!dishName) {
                alert('请填写菜品名称');
                return;
            }
            
            // 模拟保存成功
            alert('保存成功！');
            window.location.href = 'kitchen.html';
        }
    </script>
</body>
</html> 